<template>
  <div
    class="echarts_box"
    ref="chart"
    @click="handleBoxClick" 
  ></div>
</template>

<script>

export default {
  name: "polarPie",
  props: {
    option: Object,
    data: Array
  },
  data() {
    return {
      pieDatas: [],
      timeer: "",
      defaultColors:["#286AF7","#00BAE9","#3BD242","#DFDF01","#FD9802","#F9691A","#F14E4E","#AE0CE3","#6E11EC","#4911EC"]
    };
  },
  computed: {
    colors() {
      return this.option.colors;
    },
  },
  methods: {
    init() {
        this.pieDatas = JSON.parse(JSON.stringify(this.data));
        this.initChart();
    },
    initChart() {
      const chart = this.$refs.chart;
      if (chart) {
        let myEchart = echarts.init(chart);
        this.myChart = myEchart;
        var datas = JSON.parse(JSON.stringify(this.pieDatas));
        let max = this.getMax(this.pieDatas);
        let option = {
          grid: {
            left: this.option.gridX || 0,
            right: this.option.gridX2 || 0,
            top: this.option.gridY || 0,
            bottom: this.option.gridY2 || 0,
          },
          tooltip: {
            trigger: "item",
            backgroundColor:'rgba(50,50,50,0.7)',
            borderColor:'#333',
            textStyle:{
              color:'#fff'
            },
            formatter:'{b}:{c}'+(this.option.yName||"")
          },
          angleAxis: {//外环
            type: "category",
            axisLine: {
              lineStyle: {
                opacity: 0.1,
                color: this.option.axisSplitLineColor || "rgba(109, 138, 146, .1)",
              },
            },
            axisLabel: {
              show: this.hasProp(this.option, "axisLabelShow", true),
              interval: 0,
              fontSize: this.option.nameFontSize || 16,
              color: this.option.nameColor || "#fff",
            },
            axisTick: {
              show: false,
            },
            data: this.hasProp(this.option, "labelShowValue", true)?datas.map((item) => {
              return item.name+item.value + (this.option.yName||'')
            }):datas.map((item) => item.name),
            z: 10,
          },
          radiusAxis: {//极坐标径向轴
            max: this.option.max||(max||100),
            min: this.option.min||0,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: this.option.axisLineColor || "rgba(109, 138, 146, .1)",
              },
            },
            axisLabel: {
              show: this.hasProp(this.option, "axisTickShow", true),
              interval: 0,
              fontSize: this.option.axisTickNameFontSize || 16,
              color: this.option.axisTickNameColor || "#fff",
              formatter: this.option.yNameShowLable?'{value}'+(this.option.yName||''):'{value}',
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: this.option.axisSplitLineColor || "rgba(109, 138, 146, .1)",
              },
            },
            splitArea: {
              areaStyle: {
                color: "transparent",
              },
            },
            z: 2,
          },
          polar: {
            //极坐标系
            center: ["50%", "50%"],
            radius: this.option.polarRadius || "60%",
          },
          series: [
            {
              type: "bar",
              // data: datas.map((item) => {
              //   item.value = ((item.value / max) * 100).toFixed(2);
              //   return item;
              // }),
              data: datas,
              itemStyle: {
                color: (params) => {
                  return this.getColor(this.option.barColor,params.dataIndex);
                },
              },
              coordinateSystem: "polar",
            },
          ],
        };
        this.myChart.resize();
        myEchart.setOption(option, true);
      }
    },
    handleChartClick(field,data,colIndex){
      /**
       field 点击字段
       data 行数据
       */
      if(!this.option.tancShowByBox && field && this.option.tanc && this.option.tanc.showTanc){
        let params = JSON.parse(JSON.stringify(this.option.tanc.table.params||{}));
        let alias = this.option.tanc.clickDataKeyAlias || (this.option.tanc.clickDataKey || field),//拼接参数的字段名
            prop = this.option.tanc.clickDataKey || field;//拼接参数取哪个字段的值
        params[alias] = data[prop];
          this.$alert({
            title: this.option.tanc.title,
            url: this.option.tanc.url,
            urlParams:{},
            type: this.option.tanc.type,
            option: this.option.tanc.option,
            table:{
              showPage:this.option.tanc.table.showPage||false,
              pageSizeField:'',
              pageIndexField:'',
              dataType: this.option.tanc.table.dataType||0,
              url:this.option.tanc.table.url||'',
              params:  Object.assign(this.option.tanc.table.params||{},params),
              columns:this.option.tanc.table.columns,
              data: this.option.tanc.table.data,
            },
            searchColumns: this.option.tanc.searchColumns||[],
            tabsDatas: this.option.tanc.tabsDatas||[],
            tanc: this.option.secTanc
          })
      }
    },
    handleBoxClick(){
      if(this.option.tancShowByBox && this.option.tanc && this.option.tanc.showTanc){
        this.$alert({
            title: this.option.tanc.title,
            url: this.option.tanc.url,
            // urlParams:{},
            type: this.option.tanc.type,
            table:{
              showPage:this.option.tanc.table.showPage||false,
              pageSizeField:'',
              pageIndexField:'',
              dataType: this.option.tanc.table.dataType||0,
              url:this.option.tanc.table.url||'',
              params:  Object.assign(this.option.tanc.table.params||{},{}),
              columns:this.option.tanc.table.columns||[],
              data: this.option.tanc.table.data||[],
            },
            option: this.option.tanc.option||{},
            searchColumns: this.option.tanc.searchColumns||[],
            tabsDatas: this.option.tanc.tabsDatas||[],
            tanc: this.option.secTanc    
          })
      }
    },
    getColor(colors, i, isFirst, orient) {
      let color = colors && colors[i];
      if (color && (typeof color == 'object')) {
        if (isFirst) {
          return color.color1;
        }
        orient = orient || "horizontal";
        if (orient == "vertical") {
          return new echarts.graphic.LinearGradient(0,0,1,0,
            [
              {
                offset: 0,
                color: color.color1,
              },
              {
                offset: color.postion || 1,
                color: color.color2 || color.color1,
              },
            ],
            false
          );
        }
        return new echarts.graphic.LinearGradient(0,0,0,1,
          [
            {
              offset: 0,
              color: color.color1,
            },
            {
              offset: color.postion || 1,
              color: color.color2 || color.color1,
            },
          ],
          false
        );
      } else if(!color && (this.colors && this.colors[i])){
        return this.colors[i];
      } else {
        return this.defaultColors[i];
      }
    },
    getMax(array) {
      array = array.sort((a, b) => {
        return b.value - a.value;
      });
      return array[0].value;
    },
    hasProp(obj, field, defaultValue) {
      if (obj.hasOwnProperty(field)) {
        return obj[field];
      } else {
        return defaultValue;
      }
    },
  },
  mounted() {
    this.init();
  },
  watch: {
    option: {
      handler(val, oldval) {
        this.init();
      },
      deep: true,
    },
    data: {
      handler(val, oldval) {
        this.init();
      },
      deep: true,
    },
   
  },
//   beforeDestroy() {
//     this.EventBus.$off();
//   },
};
</script>

<style scoped>
.echarts_box {
  width: 100%;
  height: 100%;
}
</style>